<template>
	<view>
		<view class="search_top_back" v-if="imgUrl()"
			:style="{backgroundImage: 'url(' + imgUrl() + 'serve-bg.png' + ')'}">
			<view class="search_top_nav" style="height: 88rpx;">
				<view :style="{ height: statusBarHeight }" class="status_bar"></view>
				<view class="search_nav_content">
					<view @click="back" style="width: 76rpx;height: 88rpx;">
						<image style="margin-left: 28rpx;height: 36rpx;width: 20rpx;margin-top: 26rpx;"
							src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/back.png"></image>
					</view>
					<label class="search_title">服务评价</label>
				</view>
			</view>
		</view>


		<view class="serve-main" style="margin-top: -240rpx;">
			<view class="header_view">
				<image class="header_img" :src="item.avatarAbsolute"></image>
				<view style="margin-left: 20rpx;display: flex;flex-direction: column;margin-top: 6rpx;">
					<label
						style="font-size: 36rpx;font-weight: 500;color: #333333;line-height: 52rpx;">{{ item.name }}</label>
					<label style="font-size: 24rpx;color: #418170;line-height: 34rpx;">{{ item.jobName }}</label>
				</view>
			</view>
			<view class="score_view">
				<view class="nav_title_view">
					<image style="width: 6rpx;height: 28rpx;" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wo/record_flag.png"></image>
					<label style="margin-left: 24rpx;color: #333333;font-size: 28rpx;">评分</label>
				</view>
				<view class="star_view">
					<label
						style="margin-left: 30rpx;color: #333333;font-size: 28rpx;line-height: 40rpx;margin-right: 60rpx;">服务态度</label>
					<u-rate :minCount='0.5' :allowHalf="true" size=56 active-color="#FF822E" inactive-color="#CCCCCC"
						gutter="20" v-model="form.serviceAttitude"></u-rate>
				</view>
				<view class="star_view">
					<label
						style="margin-left: 30rpx;color: #333333;font-size: 28rpx;line-height: 40rpx;margin-right: 60rpx;">店内卫生</label>
					<u-rate :minCount='0.5' :allowHalf="true" size=56 active-color="#FF822E" inactive-color="#CCCCCC"
						gutter="20" v-model="form.storeHygiene"></u-rate>
				</view>
				<view class="star_view">
					<label
						style="margin-left: 30rpx;color: #333333;font-size: 28rpx;line-height: 40rpx;margin-right: 60rpx;">专业技能</label>
					<u-rate :minCount='0.5' :allowHalf="true" size=56 active-color="#FF822E" inactive-color="#CCCCCC"
						gutter="20" v-model="form.professionalSkill"></u-rate>
				</view>
				<view class="star_view">
					<label
						style="margin-left: 30rpx;color: #333333;font-size: 28rpx;line-height: 40rpx;margin-right: 60rpx;">是否愿意推荐给好友</label>
					<u-rate :minCount='0.5' :allowHalf="true" size=56 active-color="#FF822E" inactive-color="#CCCCCC"
						gutter="20" v-model="form.shareDesire"></u-rate>
				</view>
			</view>
			<view class="evaluatee_view">
				<view class="nav_title_view">
					<image style="width: 6rpx;height: 28rpx;" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wo/record_flag.png"></image>
					<label style="margin-left: 24rpx;color: #333333;font-size: 28rpx;">评价</label>
				</view>
				<view class="input_back">
					<textarea v-model="form.evaluation"
						style="width: cacl(100% - 20rpx);height: cacl(100% - 20rpx);margin: 20rpx;font-size: 28rpx;"
						placeholder="请输入评价内容" placeholder-style="color:#CCCCCC"></textarea>
				</view>
			</view>
		</view>
		<!-- <view style="left: 0;top: 0;background-color: #DFEDE9;width: 100%;height: 100%;z-index: -1;position: absolute;"></view> -->

		<bottom-big-btn-view btnTitle="提交" @commit="commitEvent"></bottom-big-btn-view>
	</view>
</template>

<script>
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
	export default {
		data() {
			return {
				form: {
					evaluation: '',
					serviceAttitude: 0, // 服务态度
					storeHygiene: 0, // 店内卫生
					professionalSkill: 0, // 专业技能
					shareDesire: 0 // 推荐意愿
				},
				item: {},
				statusBarHeight: statusBarHeight,
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			commitEvent() {
                if(!this.form.serviceAttitude){
                    return 	uni.showToast({ title: '服务态度不能为空', icon: 'none' });
                }
                if(!this.form.storeHygiene){
                    return 	uni.showToast({ title: '店内卫生不能为空', icon: 'none' });
                }
                if(!this.form.professionalSkill){
                    return 	uni.showToast({ title: '专业技能不能为空', icon: 'none' });
                }
                if(!this.form.shareDesire){
                    return 	uni.showToast({ title: '是否愿意推荐给好友不能为空', icon: 'none' });
                }
				var newForm = {
					evaluation: this.form.evaluation,
					serviceAttitude: this.form.serviceAttitude * 2,
					storeHygiene: this.form.storeHygiene * 2,
					professionalSkill: this.form.professionalSkill * 2,
					shareDesire: this.form.shareDesire * 2,
					empId: this.form.id
				}
				this.request.httpTokenJsonRequest('/mp-api/wx/organ/employee/evaluatee', newForm, 'POST', false).then(
					res => {
						if (res.code == 0) {
							uni.showToast({
								icon: "success",
								title: "评价成功"
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 500)
						}
					})
			},
			imgUrl() {
				return this.request.appImageBaseUrl
			}
		},
		onLoad(option) {
			this.item = JSON.parse(decodeURIComponent(option.item))
			this.form.emp_name = this.item.name
			this.form = Object.assign({}, this.form, this.item)
		}
	}
</script>

<style scoped>
	.header_view {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 30rpx;
		height: 100rpx;
	}

	.search_top_back {
		height: 500rpx;
		background-size: 100% 100%;
	}

	.header_img {
		width: 100rpx;
		height: 100rpx;
		box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0, 0, 0, 0.04);
		border: 2rpx solid #FFFFFF;
		border-radius: 50%;
		margin-left: 40rpx;
	}

	.score_view {
		border-bottom: 20rpx #F6F6F6 solid;
		display: flex;
		flex-direction: column;
		background-color: #fff;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		margin-top: 20rpx;
	}

	.nav_title_view {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 100rpx;
		margin-top: 10rpx;
	}

	.evaluatee_view {
		display: flex;
		flex-direction: column;
		background-color: #fff;
		width: 100%;
		height: 916rpx;
	}

	.input_back {
		margin-left: 30rpx;
		width: calc(100% - 60rpx);
		height: 375rpx;
		background-color: #F6F6F6;
		border-radius: 16rpx;
	}

	.star_view {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 34rpx;
	}
</style>
